<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Pulley System</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="520"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY) {
        const headlen = 10;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.save();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        ctx.restore();
    }

    // --- Define coordinates and dimensions ---
    const centerX = canvas.width / 2;
    const groundY = 450;
    
    const pulleyR = 40;
    const pulleyCenterX = centerX;
    const pulleyCenterY = 200;
    
    const ropeX1 = pulleyCenterX - pulleyR;
    const ropeX2 = pulleyCenterX + pulleyR;

    // Block A dimensions and position
    const wA = 80;
    const hA = 120;
    const xA = ropeX1 - wA / 2;
    const yA = groundY - hA;

    // Block B dimensions and position
    const wB = 60;
    const hB = 70;
    const xB = ropeX2 - wB / 2;
    const yB = groundY - hB;
    
    // Pulley bracket
    const bracketWidth = 20;
    const bracketTotalHeight = 90; 
    const bracketTopY = pulleyCenterY - bracketTotalHeight + pulleyR;
    const bracketX = pulleyCenterX - bracketWidth / 2;

    // --- Drawing ---
    
    // 1. Draw Ground
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.moveTo(centerX - 150, groundY);
    ctx.lineTo(centerX + 150, groundY);
    ctx.stroke();

    // 2. Draw Blocks A and B
    ctx.fillStyle = '#D3D3D3'; // Light gray for blocks
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;

    // Block A
    ctx.fillRect(xA, yA, wA, hA);
    ctx.strokeRect(xA, yA, wA, hA);
    
    // Block B
    ctx.fillRect(xB, yB, wB, hB);
    ctx.strokeRect(xB, yB, wB, hB);

    // 3. Draw Pulley
    // Pulley wheel (darker gray)
    ctx.fillStyle = '#808080'; // Gray
    ctx.beginPath();
    ctx.arc(pulleyCenterX, pulleyCenterY, pulleyR, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();

    // Pulley bracket (light gray)
    ctx.fillStyle = '#D3D3D3';
    ctx.fillRect(bracketX, bracketTopY, bracketWidth, bracketTotalHeight);
    ctx.strokeRect(bracketX, bracketTopY, bracketWidth, bracketTotalHeight);

    // 4. Draw Rope
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.moveTo(ropeX1, yA);
    ctx.lineTo(ropeX1, pulleyCenterY);
    ctx.arc(pulleyCenterX, pulleyCenterY, pulleyR, Math.PI, 0); // Arc over the top
    ctx.lineTo(ropeX2, yB);
    ctx.stroke();

    // 5. Draw Force F
    const forceTopY = 80;
    drawArrow(ctx, pulleyCenterX, bracketTopY, pulleyCenterX, forceTopY);
    ctx.fillStyle = 'black';
    ctx.font = 'italic bold 24px Arial';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('F', pulleyCenterX + 15, forceTopY + 5);

    // 6. Draw Labels
    ctx.fillStyle = 'black';
    ctx.font = 'bold 28px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('A', xA + wA / 2, yA + hA / 2);
    ctx.fillText('B', xB + wB / 2, yB + hB / 2);

    // 7. Draw bottom text
    ctx.font = '24px "SimSun", "Microsoft YaHei"';
    ctx.fillText('习题 1-29 图', centerX, groundY + 45);

</script>
</body>
</html>